<template>
  <el-dialog :title="title" :model-value="visible" width="700px" :fullscreen="mobile">
    <el-row>
      <el-col :span="5" :xs="24">
        <section>
          <div>分组</div>
          <el-checkbox v-model="checkOne">分组一</el-checkbox>
        </section>
      </el-col>
      <el-col :span="19" :xs="24">
        <section v-infinite-scroll="load" class="infinite-section">
          <el-checkbox-group v-model="checkList">
            <el-row>
              <el-col :span="8" :xs="12" v-for="item in roomKeyList" :key="item">
                <el-checkbox :label="item">option {{ item }}</el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </section>
        <slot></slot>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">
          {{ type === 'distribute' ? '下发' : '确定'}}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="KeyOperationDl">
import useAppStore from '@/store/modules/app'

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    defalut: 'add'
  },
  title: {
    type: String,
    default: ''
  }
})
const checkList = ref([])
const checkOne = ref(false)

const roomKeyList = ref(40)

const mobile = computed(() => useAppStore().device === 'mobile')
watch(() => props.visible, (value) => {
  if (value) {
    checkList.value = []
  }
})


function load() {
  if (roomKeyList.value >= 120) return;
  roomKeyList.value += 40
}


function handleCancel() {
  emit('cancel')
}

function handleOk() {
  emit('ok', props.type, checkList.value)
}
</script>

<style lang="scss" scoped>
.infinite-section {
  width: 100%;
  height: 300px;
  padding: 10px 20px;
  overflow: auto;
  border: 1px solid var(--el-border-color);
}
</style>